﻿@model FineAdmin.Model.MaterialGoodsModel
@using HuiJI.Tools.TBK.JTO;
@{
    Layout = null;

}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.3.0/style/weui.min.css" rel="stylesheet">
    <link href="~/Content/css/weuix.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/theme/default/layer.min.css" rel="stylesheet">
    <title>@Model.Title</title>
    <style>
        img {
            width: 100%;
        }

        div {
            display: block;
        }

        .galaxy-abstract {
            border-top: 1px solid #EAEAEA;
            border-radius: 0 0 10px 10px;
            margin-bottom: 10px;
            box-sizing: border-box;
            padding: 5px 10px 12px;
            background: #FFF;
        }

        .galaxy-abstract-ps {
            height: 38px;
            line-height: 38px;
            align-items: baseline;
            justify-content: space-between;
        }

        .flex-row {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
        }

        .galaxy-abstract-title {
            font-size: 15px;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            color: #333;
            line-height: 20px;
            margin-top: 12px;
            overflow: hidden;
            padding-bottom: 10px;
        }

        .galaxy-abstract-features {
            margin-bottom: 15px;
        }

        .galaxy-abstract-coupon {
            height: 65px;
            background: linear-gradient(270deg,#fee 0,#ffe2e8 100%);
            border-radius: 10px;
            box-sizing: border-box;
        }

        .galaxy-abstract-price {
            font-size: 16px;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            height: 38px;
            color: #F91415;
        }

            .galaxy-abstract-price span:last-child, .galaxy-abstract-sales {
                font-size: 12px;
                font-family: PingFangSC-Regular,PingFang SC;
                font-weight: 400;
                color: #888;
                margin-left: auto;
            }

            .galaxy-abstract-price span:first-child {
                font-size: 27px;
                display: inline-block;
            }

        .galaxy-abstract-sales span {
            color: #F91415;
        }

        .galaxy-abstract-coupon-effective {
            flex: 1;
            height: 35px;
            padding: 15px 0;
        }

        .galaxy-abstract-coupon-amount {
            height: 35px;
            line-height: 35px;
            padding: 0 20px;
            font-size: 15px;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: #ff313e;
            align-items: baseline;
        }

            .galaxy-abstract-coupon-amount span {
                font-size: 24px;
                font-weight: 500;
            }

        .flex-column {
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            align-items: stretch;
        }

        .galaxy-abstract-coupon-deadline span:first-child {
            height: 18px;
            font-size: 13px;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            color: #ff313e;
            line-height: 18px;
        }

        .galaxy-abstract-coupon-deadline span:last-child {
            height: 16px;
            font-size: 11px;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: #ff313e;
            line-height: 16px;
        }

        .galaxy-abstract-coupon-receive {
            padding: 15px 0;
            flex: 0 0 115px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            color: #FF313E;
            text-decoration: none;
            border-left: 1px dashed #FFF;
            position: relative;
        }

            .galaxy-abstract-coupon-receive::after, .galaxy-abstract-coupon-receive::before {
                content: '';
                background: #FFF;
                width: 11px;
                height: 11px;
                border-radius: 50%;
                position: absolute;
                left: -6px;
                top: -6px;
                z-index: 8;
            }

        .galaxy-abstract-price span:last-child {
            padding-left: 6px;
            text-decoration: line-through;
        }

        #weixin-tt {
            text-align: center;
            margin-top: 10px;
        }

            #weixin-tt .fq-goods {
                border: .2rem #f3e7e3 dashed;
                padding: 3px;
                margin: 10px 0;
            }

        .galaxy-talent {
            margin-bottom: 10px;
            border-radius: 10px;
            background: #FFF;
            box-sizing: border-box;
            padding: 7px 12px 12px;
        }
        .galaxy-talent-title {
            align-items: flex-end;
            height: 27px;
        }
        .galaxy-talent-avatar {
            font-size: 13px;
            color: #fe3738;
            line-height: 20px;
        }
        .galaxy-talent-shares {
            margin-left: auto;
            height: 20px;
            color: #666;
            line-height: 20px;
        }
        .galaxy-talent-content {
            background: #F4F4F4;
            border-radius: 10px;
            padding: 8px 18px;
            margin-top: 10px;
            position: relative;
            color: #555;
            line-height: 18px;
        }
            .galaxy-talent-content::after {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                top: -10px;
                left: 51px;
                border-bottom: 12px solid #F4F4F4;
                border-right: 20px solid #FFF;
                z-index: 8;
                transform: rotate(-10deg);
            }
        .galaxy-talent-content, .galaxy-talent-shares {
            font-size: 12px;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
        }

        .right-menu {
            display: block;
            width: 120px;
            text-align: center;
            background: rgba(51,51,51,.9);
            border: 0;
            color: white;
            position: absolute;
            top: 55px;
            z-index: 10086;
            border-radius: 6px;
            right: 6px;
        }

        

            .right-menu ul li {
                border-bottom: solid 1px rgba(102,102,102,.9);
                padding: 4px 7px 2px 4px;
            }

                .right-menu ul li:last-child {
                    border-bottom: solid 1px rgba(102,102,102,0);
                }
    </style>
</head>
<body>
    
    <div>
        <div class="weui-btn_warn weui-header fixedHeader-locked" style="background-color:rgba(250, 81, 81, 0.46);position:fixed;width:100%;z-index:100;">
            <div class="weui-header-left fanhui"> <a class="icon icon-109 f-white"></a>  </div>
            <h1 class="weui-header-title">商品详情</h1>
            <div class="weui-header-right" id="more"><a class="icon icon-22 f-white"></a></div>
            <div class="right-menu" style="display:none;">
                <ul>
                    <li>
                        <a href="/mobile/index">
                            线报首页
                        </a>
                   
                    </li>
                    <li>
                        <a href="/mobile/Subject"> 
                            优惠专题
                        </a>
                  
                    </li>
                </ul>
            </div>
        </div>
        <div class="swiper-container" style="max-height:375px;">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="@Model.PictUrl" />
                </div>
                @if (!string.IsNullOrWhiteSpace(Model.SmallImages))
                {
                    var SmallImages = (string.IsNullOrWhiteSpace(Model.SmallImages) ? new List<string>() : FastJSON.JSON.ToObject<List<string>>(Model.SmallImages));

                    foreach (var item in SmallImages)
                    {
                        <div class="swiper-slide">
                            <img src="@item" />
                        </div>
                    }

                }


            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            @*<div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>*@

            <!-- 如果需要滚动条 -->
            @*<div class="swiper-scrollbar"></div>*@
        </div>

        <div>
            <div class="galaxy-abstract">
                <div class="galaxy-abstract-ps flex-row">
                    <div class="galaxy-abstract-price">￥<span>@Model.CouponAfterPrice</span><span>原价 ¥@Model.ZkFinalPrice</span></div>
                    <div class="galaxy-abstract-sales">30日已售<span>@Model.Volume</span>件</div>
                </div>

                <div class="galaxy-abstract-title">
                    <span class="tm">
                        @if (Model.UserType == 1)
                        {
                            <p style="color:white;background-color:red;display:inline-flex; border-radius:4px;padding: 0px 6px 0px 6px;">天猫</p>
                        }
                        else
                        {
                            <p style="color:white;background-color:#fd4600;display:inline-flex; border-radius:4px;padding: 0px 6px 0px 6px;">淘宝</p>
                        }


                    </span>
                    @Model.Title
                </div>
                <div class="galaxy-abstract-features">

                </div>
                <div class="galaxy-abstract-coupon flex-row">
                    <div class="galaxy-abstract-coupon-effective flex-row">
                        <div class="galaxy-abstract-coupon-amount flex-row">¥<span>@Model.CouponAmount</span></div>
                        <div class="galaxy-abstract-coupon-deadline flex-column">
                            <span>优惠券使用期限</span>
                            <span>@Model.CouponStartTime.Value.ToString("yyyy.MM.dd")-@Model.CouponEndTime.Value.ToString("yyyy.MM.dd")</span>
                        </div>
                    </div>
                    <a class="galaxy-abstract-coupon-receive " id="getCoupon">
                        @(ViewBag.isTKL? "立即领券":"点我购买")
                    </a>
                </div>
            </div>


            <div class="galaxy-talent" style="@(string.IsNullOrWhiteSpace(Model.ItemDescription) ? "display:none;" : "")">
                <div class="galaxy-talent-header">
                    <div class="galaxy-talent-title flex-row">
                        <div class="galaxy-talent-avatar flex-row">推荐理由</div>
                        <div class="galaxy-talent-shares">@Model.Nick</div>
                    </div>
                    <div class="galaxy-talent-content">
                        @Model.ItemDescription
                    </div>
                </div>
            </div>

        </div>
        @*<div class="weui-loadmore weui-loadmore_line">
                <span class="weui-loadmore__tips">商品详情</span>
            </div>
            <div>

            </div>*@
        <div>
            @*@Model.TKL*@
        </div>





    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
    <script src="~/Scripts/zepto.weui.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
    @{ 
        var url = !string.IsNullOrWhiteSpace(Model.CouponShareUrl) ? Model.CouponShareUrl : !string.IsNullOrWhiteSpace(Model.ClickUrl) ? Model.ClickUrl : "";
    }
    <script>
        var isWx = '@ViewBag.isWX';
        var tkl = '@Model.TKL';
        var istkl = '@ViewBag.isTKL';
        var url = '@url';
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            //navigation: {
            //    nextEl: '.swiper-button-next',
            //    prevEl: '.swiper-button-prev',
            //},

            // 如果需要滚动条
            //scrollbar: {
            //    el: '.swiper-scrollbar',
            //},
        })

        function setIframeHeight(iframe) {
            if (iframe) {
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document.body) {
                    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                }
            }
        };

        $("#more").click(function () {
            var display = $('.right-menu').css('display');
            if (display == 'none') {
                $(".right-menu").fadeIn(200);
            } else {
                $(".right-menu").fadeOut(200);
            }

        });


        $("#getCoupon").click(function () {
            if (isWx == "False" || istkl =="False") {
                window.location.href = url;
                return false;
            }
            //var str = "复制框内整段文字，打开👉手淘👈即可「领取优惠券」并购买"+ tkl;
            var str = tkl;
            layer.open({
                type: 1,
                shade: 0.3,
                shadeClose: true,
                area: ['300px', '300px'],
                title: [
                    '复制淘口令',
                    'background-color: #FF4351; color:#fff;'
                ]
                , content: ' <div id="weixin-tt"><div class="am-margin-top am-text-left" _hover-ignore="1"><div class="fq-goods am-text-center am-margin-top-sm" ><div class="fq-explain  am-center am-text-center"></div><span id="copy_key_ios" style="display: none;padding:0;">复制框内整段文字，打开👉手淘👈即可「领取优惠券」并购买' + tkl + '</span><textarea readonly  id="copy_key_android" type="text" class="am-form-field am-text-center am-text-mss pt10"  oninput="regain();" style="font-size: 14px;height:6rem;padding:0;width: 100%;">' + str+ '</textarea><div class="clear"></div></div></div><button type="button" id="copybtn" class="layui-btn layui-btn-radius layui-btn-danger weui-btn weui-btn_warn"" data-clipboard-action="copy" data-clipboard-target="#copy_key_android">点我复制</button></div>'
            });
        });

        window.onload = function () {
            setIframeHeight(document.getElementById('external-frame'));

            //点击复制
            $(document).on('click', '#copybtn', function () {
                var Url = document.getElementById("copy_key_android");
                Url.select();
                document.execCommand("Copy");
                layer.msg("复制成功,打开淘宝即刻查看！");
            });

            $(".fanhui").click(function () {
                window.location.href = "javascript:history.go(-1)";
            });
        };
    </script>
</body>
</html>
